<template>
  <div class="page">
    <el-pagination
      v-model:currentPage="currentPage"
      :page-sizes="pageSizes"
      :page-size="limit"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  page: {
    type: Number,
    default: 0,
  },
  limit: {
    type: Number,
    default: 30,
  },
});
const emits = defineEmits(["handleSizeChange", "handleCurrentChange"]);
const currentPage = ref(props.page);
const pageSizes = reactive([30, 50, 100, 200]);
const handleSizeChange = (val: number) => {
  emits("handleSizeChange", {
    limit: val,
    page: 1,
  });
};
const handleCurrentChange = (val: number) => {
  emits("handleCurrentChange", {
    limit: props.limit,
    page: val,
  });
};
</script>
<style lang="scss" scoped>
@mixin height {
  height: 32px;
  line-height: 32px;
}
@mixin button {
  width: 32px;
  margin: 0 8px;
  border: 1px solid #d9d9d9;
  @include height();
}
:deep(.el-pagination) {
  --el-pagination-button-height: 32px;
  --el-color-primary: #1890ff;
  li,
  .btn-prev,
  .btn-next {
    @include button();
  }
  .el-input__inner {
    @include height();
  }
  li.active {
    border-color: #1890ff;
  }
  li.active + li {
    border-left: 1px solid #d9d9d9;
  }
}
</style>
